.page-body.ng-enter {
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    opacity:0;
}

.page-body.ng-enter.ng-enter-active {
    opacity:1;
}


/*
  我们使用CSS过渡(transition)语句来为带有.item类的元素添加动画效果，他们将在各个条目新增和移动时触发。
*/
.item.ng-enter, .item.ng-move {
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  transition:0.5s linear all;
  opacity:0;
}

/*
 用ng-enter-active和ng-move-active类来定义过渡效果的最终属性值，以便动画指令知道它最终该达到什么状态。
*/
.item.ng-enter.ng-enter-active,
.item.ng-move.ng-move-active {
  opacity:1;
}

/*
  我们使用CSS关键帧(keyframe animation)语句来为带有.item类的元素定义移除动画(ng-leave)
*/
.item.ng-leave {
  -webkit-animation:0.5s my_animation;
  -moz-animation:0.5s my_animation;
  -o-animation:0.5s my_animation;
  animation:0.5s my_animation;
}

@keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

/*
  不幸的是，每个浏览器都需要用它自己的“方言”来定义关键帧动画
*/
@-webkit-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

@-moz-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

@-o-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}